<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}" />
<link rel="stylesheet" th:href="@{/css/matrix-style.css}" />
<link rel="stylesheet" th:href="@{/css/matrix-media.css}" />
<link rel="stylesheet" th:href="@{/css/metroStyle.css}" type="text/css">
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
<title>角色管理</title>
</head>
<body>

	<!--Header-part-->
	<div id="header1">
		<h1>
			<!-- <a href="dashboard.html">Matrix Admin</a> -->
			<a href="dashboard.html">谷元科技</a>
		</h1>
	</div>
	<!--close-Header-part-->

	<!--top-Header-menu-->
	<div th:include="common/top :: top"></div>
	<div th:include="common/menu :: menu"></div>
	<div id="content">
<!-- 		<div id="content-header">
			<div id="breadcrumb">
			<a href="#" title="Go to Home" class="tip-bottom"><i
					class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
			</div>
		</div> -->
		<div class="container-fluid">
			<hr>
			<div class="row-fluid">
				<div class="span12">

					<div class="widget-box">
						<div class="widget-title">
							<span class="icon"><i class="icon-th"></i></span>
							<h5>角色列表</h5>
						</div>
						<form class="form-inline">
							<button type="button" shiro:hasPermission="/roles/add"
								onclick="$('#addRole').modal();" class="btn btn-info"
								style="float: right; margin-right: 1px;">新增</button>
							<button type="button" shiro:hasPermission="/roles/delete"
								onclick="delById();" class="btn btn-info"
								style="float: right; margin-right: 1px;">删除</button>
							<button type="button"
								shiro:hasPermission="/roles/saveRoleResources"
								onclick="allotResources();" class="btn btn-info"
								style="float: right; margin-right: 1px;">分配权限</button>
						</form>
						<div class="widget-content nopadding">
							<table class="table table-bordered data-table" id="datatable">
								<thead>
									<tr>
										<th><input type="checkbox" class="checkall" /></th>
										<th>ID</th>
										<th>角色名称</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<%--弹框--%>
	<div class="modal fade bs-example-modal-sm" id="selectResources"
		tabindex="-1" role="dialog" aria-labelledby="selectRoleLabel">
		<div class="modal-dialog modal-sm" role="document"
			style="height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="selectRoleLabel">分配权限</h4>
				</div>
				<div class="modal-body">
					<form id="boxRoleForm">
						<ul id="treeDemo" class="ztree"></ul>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" onclick="saveRoleResources();"
						class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
	<%----/弹框--%>


	<!--添加弹框-->
	<div class="modal fade" id="addRole" tabindex="-1" role="dialog"
		aria-labelledby="addroleLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="addroleLabel">添加角色</h4>
				</div>
				<div class="modal-body">
					<form id="roleForm">
						<div class="form-group">
							<label class="control-label">角色名称:</label> <input type="text"
								class="form-control" name="roleDesc" id="roleDesc"
								placeholder="请输入角色名称" />
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" onclick="addRole();" class="btn btn-primary">Save</button>
				</div>
			</div>
		</div>
	</div>
	<!--/添加弹框-->



	<!--Footer-part-->
	<div class="row-fluid">
		<div id="footer" class="span12">
			2017 &copy; yqj <a href="http://themedesigner.in/">Themedesigner.in</a>
		</div>
	</div>
	<!--end-Footer-part-->
	<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/jquery.dataTables.min.js}"></script>
	<script th:src="@{/js/layer.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.ztree.excheck.js}"></script>
	<script th:src="@{/js/common/common.js}"></script>
	<script type="text/javascript">
    $(".checkall").click(function () {
        var check = $(this).prop("checked");
        $(".checkchild").prop("checked", check);
    });
    var table;
    $(document).ready(function() {
        table = $('#datatable').DataTable( {
            "dom": '<"top"i>rt<"bottom"flp><"clear">',
            "searching" : false,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "serverSide": true,//开启服务器模式，使用服务器端处理配置datatable
            "processing": true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

            "ajax": 'roles',
            "columns": [
                {
                    "sClass": "text-center",
                    "data": "id",
                    "render": function (data, type, full, meta) {
                        return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                    },
                    "bSortable": false
                },
                { "data": "id" },
                { "data": "roleDesc" },
            ],
            columnDefs:[
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 },
            ],

        } );



    } );

    function search(){
        table.ajax.reload();
    }
    //弹出选择角色的框
    var roleId;
    function allotResources() {
        var rid = $(".checkchild:checked").val();
        if ($(".checkchild:checked").length < 1)
        {
            layer.msg('请选择一条数据');
            return;
        }
        if ($(".checkchild:checked").length > 1)
        {
            layer.msg('一次只能修改一条数据');
            return;
        }
        roleId = rid;

        var zTree;
        var setting = {
          view: {
            dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
            showLine: true,//是否显示节点之间的连线
            fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
            selectedMulti: false //设置是否允许同时选中多个节点
          },
          check:{
            //chkboxType: { "Y": "ps", "N": "ps" },
            chkStyle: "checkbox",//复选框类型
            enable: true //每个节点上是否显示 CheckBox 
          },
          data: {
            simpleData: {//简单数据模式
            enable:true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: ""
            },
            key:{
      		  name:"rsName"
      	  	}
          },  
          callback: {
            beforeClick: function(treeId, treeNode) {
              zTree = $.fn.zTree.getZTreeObj("treeDemo");
              if (treeNode.isParent) {
                zTree.expandNode(treeNode);//如果是父节点，则展开该节点
              }else{
                zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
              }
            }
          }
        };

        $.ajax({
            async:false,
            type : "POST",
            data:{rid:rid},
            url: "resources/resourcesWithSelected",
            dataType:'json',
            contentType: "application/json; charset=utf-8",
            success: function(data){
            	//console.log(data);
                $.fn.zTree.init($("#treeDemo"), setting, data);
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");	
                zTree.expandAll(true);
                $('#selectResources').modal(); 

            }
        });
        
    }

    //保存权限的选择
    function saveRoleResources() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                checkNode= zTree.getCheckedNodes(true);
        var ids = new Array();
        for(var i=0;i<checkNode.length;i++){
            ids.push(checkNode[i].id);
        }
        $.ajax({
            async:false,
            type : "POST",
            dataType:'json',
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify({roleId:roleId,resourcesIdStr:ids.join(",")}),
            url: "roles/saveRoleResources",
            success: function(data){
                if(data=="success"){
                    layer.msg('保存成功');
                    $('#selectResources').modal('hide');
                }else{
                    layer.msg('保存失败');
                    $('#selectResources').modal('hide');
                }
            }
        });
    }
    //添加用户
    function addRole() {
        var roleDesc = $("#roleDesc").val();
        if(roleDesc == "" || roleDesc == undefined || roleDesc == null){
            return layer.msg('角色名称不能为空', function(){
                //关闭后的操作
            });
        }

        $.ajax({
            cache: true,
            type: "POST",
            url:'roles/add',
            data:JSON.stringify($("#roleForm").serializeObject()),// 你的formid
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function(data) {
                if(data=="success"){
                    layer.msg('保存成功');
                    table.ajax.reload();
                    $('#addRole').modal('hide');
                }else{
                    layer.msg('保存失败');
                    $('#addRole').modal('hide');
                }
            }
        });
    }


    function delById() {
        var id = $(".checkchild:checked").val();
        if ($(".checkchild:checked").length < 1)
        {
            layer.msg('请选择一条数据');
            return;
        }
        if ($(".checkchild:checked").length > 1)
        {
            layer.msg('一次只能修改一条数据');
            return;
        }
        layer.confirm('您确定要删除该角色吗？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            $.ajax({
                cache: true,
                type: "POST",
                url:'roles/delete',
                data:{id:id},
                async: false,
                success: function(data) {
                    if(data=="success"){
                        layer.msg('删除成功');
                        table.ajax.reload();
                    }else{
                        layer.msg('删除失败');
                    }
                }
            });
        });


    }
</script>

</body>
</html>